<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="../../favicon.ico">
		<title>登录</title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<!-- 页面的title图片 -->
		<link rel="icon" sizes="192x192" href="//res.wx.qq.com/a/wx_fed/webwx/res/static/img/qMUjOdv.png" type="image/png" />
		<script>
			$(function() {

				$("#username").blur(function() {
					if($(this).val() == "") {
						$("#span1").html("<font class='error' style='color: red'>用户名不能为空</font>");
					}
				});
				$("#username").click(function() {
					if($(this).val() != null) {
						$(".error").val("");
					}
				});
				$("#password").blur(function() {
					if($(this).val() == "") {
						$("#span2").html("<font class='error' style='color: red'>密码不能为空</font>");
					}
				});
				$("#password").click(function() {
					$(".error").remove();
				});
			});
		</script>
	</head>

	<body>
		<!--http://litta.co/wp-content/uploads/2017/06/homescreen.jpeg-->
		<div class="container-fluid" style="background-image: url(http://litta.co/wp-content/uploads/2017/06/homescreen.jpeg);padding-top: 200px;padding-bottom: 400px;">
			<div class="row col-sm-5 col-md-5  col-lg-5 panel" style="background-color: white;margin-left: 28%;">
				<h1 style="padding-top: 20px; padding-bottom: 20px;"><font face="symbol"><p class="text-center">账号登录</p></font></h1>
				<hr />
				<form action="/user/login" method="post">
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<label for="exampleInputEmail1">用户名:</label>
						<input type="text" class="form-control" id="username" name="name" placeholder="请输入用户名">
						<span id="span1"></span>
					</div>
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<label for="exampleInputPassword1">密	码:</label>
						<input type="password" class="form-control" id="password" name="passWord" placeholder="请输入密码">
						<span id="span2"></span>
					</div>
					<!--<div class="checkbox">
					<label>
				    	<input type="checkbox"> Check me out
				    </label>
					</div>-->
					
					<!--<div style="padding-bottom: 10px;"></div>-->
					<div class="col-sm-12 col-md-12  col-lg-12">
						<hr />
						<button type="reset" class="btn btn-success col-sm-6 col-md-6  col-lg-6">重置</button>
						<button type="submit" class="btn btn-info col-sm-6 col-md-6  col-lg-6">登录</button>
					</div>
					<div class="col-sm-12 col-md-12  col-lg-12">
						<hr />
						<p class="text-center">你还没有账号？<a href="/user/signup">立即注册</a></p>
					</div>
				</form>
			</div>
		</div>
	</body>

</html>